<template>
    <div class="pages">
        <div class="page-box">
            <div v-if="type==2" class="top-title">
                <div class="title">物料入库 </div>
                <div class="right-btn">
                    <el-button @click="utils.backPage()">取消</el-button>
                    <el-button type="primary">存草稿</el-button>
                </div>
            </div>
            <div class="form-box">
                <h4>基本信息</h4>
                <el-form :model="ruleForm" label-position="left" :inline="true" label-width="110px" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                        <el-form-item label="操作人：" prop="uname" style="">
                            <el-input v-model="ruleForm.uname"></el-input>
                        </el-form-item>
                        <el-form-item label="操作人编号：" prop="uname">
                            <el-input v-model="ruleForm.uname"></el-input>
                        </el-form-item>
                        <el-form-item label="订单编号：" prop="uname">
                            <el-input v-model="ruleForm.uname"></el-input>
                        </el-form-item>
                </el-form>
                <h4>入库内容</h4>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="date" label="序号" width="180"> </el-table-column> 
                    <el-table-column prop="name" label="物料名称" width="180"> </el-table-column> 
                    <el-table-column prop="name" label="物料编号"> </el-table-column>
                    <el-table-column prop="address" label="物料类型"> </el-table-column>
                    <el-table-column prop="name" label="入库数量"> </el-table-column>
                    <el-table-column prop="name" label="单位"> </el-table-column>
                    <el-table-column prop="name" label="备注"> </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog title="选择抄送人" :visible.sync="dialogVisible" width="30%">
            <div>
                <el-input placeholder="输入关键字进行搜索" v-model="filterText"> </el-input>
                <el-tree 
                    class="filter-tree" 
                    show-checkbox
                    node-key="id"
                    :data="data" 
                    :props="defaultProps" 
                    default-expand-all 
                    :filter-node-method="filterNode" 
                    ref="tree"> 

                </el-tree>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            type:1,     //1详情     2添加
            filterText: '',
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            dialogVisible:false,//选中人员
            ruleForm:{
                uname:'',
            },
            rules: {
                uname: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    created(){
        let {type} = this.$route.query;
        if(type){
            this.type=type
        }
    },
    methods:{
        filterNode(value, data) {//摘抄人搜索
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        submitForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (!valid) return;

            });
        },
    }
};
</script>

<style lang="scss" scoped>
.pages{
    background: #eee;
    padding: 30px;
    
    .page-box{
        background: #fff;
        border-radius: 8px;
        padding: 0 24px 20px;
        .top-title{
            padding: 20px 0;
            border-bottom: 1px solid #c2c1c1;
            position: relative;
            .title{
                font-size: 33px;
                text-align: center;
                color: #555555;
            }
            .right-btn{
                top: 20px;
                right: 0;
                position: absolute;
            }
        }
        .form-box{
            padding: 20px;
            .right-icon{
                cursor: pointer;
                padding: 0 20px;
                height: 100%;
            }
            ::v-deep{
                .el-form-item__content{
                    flex: 1;
                }
                .el-input-group__append{
                    padding: 0;
                }
                .el-form-item__content{
                    margin: 0 auto;
                }
                .el-form-item{
                    margin-right: 50px;
                }
            }
        }
    }
}
</style>